const path = require("path");
// 处理html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
    // 提取css
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    // 压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
    //多入口
    entry: {
        //公共或第三方资源
        commoncss: "./src/js/common/commoncss.js",
        dom: "./src/js/common/dom.js",
        utils: "./src/js/common/utils.js",
        axios: "./src/lib/axios/axios.js",
        fonts: "./src/js/common/fonts.js", //自己找的字体图标 字体图标
        iconfont: "./src/js/common/iconfont.js", //字体图标
        captcha: "./src/lib/captcha/captcha-mini.js", //验证码
        swiper: "./src/js/common/swiper.js", //轮播图
        weui: "./src/js/common/weui.js", //移动Web基础样式库WeUI



        //独立入口
        ad: "./src/js/ad.js",
        register: "./src/js/register.js",
        login: "./src/js/login.js",
        index: "./src/js/index.js",

        my: "./src/js/my.js",
        infochange: "./src/js/infochange.js",
        running: "./src/js/running.js",
        riding: "./src/js/riding.js",
        training: "./src/js/training.js",
        description: "./src/js/description.js",
        particulars: "./src/js/particulars.js",
        sportsData: "./src/js/sportsData.js",
        myBadge: "./src/js/myBadge.js",
        showBadge: "./src/js/showBadge.js",
        attention: "./src/js/attention.js",
        nearby: "./src/js/nearby.js",
        collection: "./src/js/collection.js",
        dynamic: "./src/js/dynamic.js",
        addition: "./src/js/addition.js"

    },
    //多出口
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/[name].js",
        publicPath: './',
          // 查找静态资源的路径
    },

    //loader 处理非js模块
    module: {
        rules: [
            //处理css
            {
                test: /\.css$/,
                   // 匹配所有.css文件
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                          // 提取css
                        options: {
                            publicPath: '../'  // 资源查找路径
                        }
                    },
                    'css-loader'  // 解析加载css到js中（把css打成字符串）。
                ]
            },
            //处理less
            {
                test: /\.less$/,
                   // 匹配所有.less文件
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                          // 提取css
                        options: {
                            publicPath: '../'  // 资源查找路径
                        }
                    },
                    'css-loader',   // 解析加载css到js中（把css打成字符串）。
                    'less-loader',   // 编译less为css
                ]
            },
            //处理css的图片
            {
                test: /\.(jpg|png|gif|webp)$/,
                loader: 'url-loader',
                options: {
                    name: '[hash].[ext]',
                       // 图片输出的名字hash长度16位 默认32位
                    limit: 10 * 1024,
                    // 小于10kb base64处理
                    // 关闭url-loader的es Module  使用commonjs module解析 , url-loader默认使用es6模块化解析 而后续使用 html-loader 引入图片是 commonjs解析  不关闭会报错
                    esModule: false,
                    outputPath: 'img' // 图片输出文件夹        
                }
            },
            //处理html的图片
            {
                test: /\.html$/, // 处理html中引入img
                loader: 'html-loader'
            },

            //处理字体
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                   // 处理字体格式文件
                loader: 'file-loader',
                options: {
                    name: '[hash:16].[ext]', // 输出名字
                    outputPath: 'fonts' // 输出路径（输出到文件夹fonts中）
                }
            },
            //es6==>es5
            {
                test: /\.js$/,
                loader: 'babel-loader',
                     // loader 编译es6为es5
                exclude: /node_modules/   // 排除
            }

        ]

    },
    //插件
    plugins: [

        // ad.html  广告页面
        new HtmlWebpackPlugin({
            template: './src/page/ad.html',
              // 模板页面
            filename: 'ad.html',
              // 输出的文件名
            chunks: ['ad', 'commoncss', "dom", "utils"]   // 需要引入哪些资源
        }),

        //register.html   注册页面
        new HtmlWebpackPlugin({
            template: './src/page/register.html',
              // 模板页面
            filename: 'register.html',
              // 输出的文件名
            chunks: ['register', 'commoncss', "dom", "utils", "axios", "captcha", "iconfont", "fonts"]   // 需要引入哪些资源
        }),


        //login.html    登录页面
        new HtmlWebpackPlugin({
            template: './src/page/login.html',
              // 模板页面
            filename: 'login.html',
              // 输出的文件名
            chunks: ['login', 'commoncss', "dom", "utils", "axios", "iconfont", "fonts"]   // 需要引入哪些资源
        }),

        //index.html    首页
        new HtmlWebpackPlugin({
            template: './src/page/index.html',
              // 模板页面
            filename: 'index.html',
              // 输出的文件名
            chunks: ['index', 'commoncss', "dom", "utils", "axios", "iconfont", "fonts", "swiper"]   // 需要引入哪些资源
        }),



        //my.html   我的界面
        new HtmlWebpackPlugin({
            template: './src/page/my.html',
              // 模板页面
            filename: 'my.html',
              // 输出的文件名
            chunks: ['my', 'commoncss', "dom", "utils", "axios", "iconfont", "fonts"]   // 需要引入哪些资源
        }),

        //infochange.html   信息修改页面
        new HtmlWebpackPlugin({
            template: './src/page/infochange.html',
              // 模板页面
            filename: 'infochange.html',
              // 输出的文件名
            chunks: ['infochange', 'commoncss', "dom", "utils", "axios", "iconfont", "fonts", "weui"]   // 需要引入哪些资源
        }),

        //running.html   跑步页面
        new HtmlWebpackPlugin({
            template: './src/page/running.html',
              // 模板页面
            filename: 'running.html',
              // 输出的文件名
            chunks: ['running', 'commoncss', "dom", "utils", "axios", "iconfont", "fonts"]   // 需要引入哪些资源
        }),

        //riding.html   骑行页面
        new HtmlWebpackPlugin({
            template: './src/page/riding.html',
              // 模板页面
            filename: 'riding.html',
              // 输出的文件名
            chunks: ['riding', 'commoncss', "dom", "utils", "axios", "iconfont", "fonts"]   // 需要引入哪些资源
        }),

        //training.html   训练页面
        new HtmlWebpackPlugin({
            template: './src/page/training.html',
              // 模板页面
            filename: 'training.html',
              // 输出的文件名
            chunks: ['training', 'commoncss', "dom", "utils", "axios", "iconfont", "fonts"]   // 需要引入哪些资源
        }),

        //description.html   课程介绍页面
        new HtmlWebpackPlugin({
            template: './src/page/description.html',
              // 模板页面
            filename: 'description.html',
              // 输出的文件名
            chunks: ['description', 'commoncss', "dom", "utils", "axios", "iconfont", "fonts"]   // 需要引入哪些资源
        }),

        //particulars.html   课程训练页面
        new HtmlWebpackPlugin({
            template: './src/page/particulars.html',
              // 模板页面
            filename: 'particulars.html',
              // 输出的文件名
            chunks: ['particulars', 'commoncss', "dom", "utils", "axios", "iconfont", "fonts"]   // 需要引入哪些资源
        }),

        //sportsData.html   运动数据页面
        new HtmlWebpackPlugin({
            template: './src/page/sportsData.html',
              // 模板页面
            filename: 'sportsData.html',
              // 输出的文件名
            chunks: ['sportsData', 'commoncss', "dom", "utils", "axios", "iconfont", "fonts"]   // 需要引入哪些资源
        }),

        //myBadge.html   我的徽章页面
        new HtmlWebpackPlugin({
            template: './src/page/myBadge.html',
              // 模板页面
            filename: 'myBadge.html',
              // 输出的文件名
            chunks: ['myBadge', 'commoncss', "dom", "utils", "axios", "iconfont", "fonts"]   // 需要引入哪些资源
        }),

        //showBadge.html  徽章展示页面
        new HtmlWebpackPlugin({
            template: './src/page/showBadge.html',
              // 模板页面
            filename: 'showBadge.html',
              // 输出的文件名
            chunks: ['showBadge', 'commoncss', "dom", "utils", "axios", "iconfont", "fonts"]   // 需要引入哪些资源
        }),

        //showBadge.html   关注页面
        new HtmlWebpackPlugin({
            template: './src/page/attention.html',
              // 模板页面
            filename: 'attention.html',
              // 输出的文件名
            chunks: ['attention', 'commoncss', "dom", "utils", "axios", "iconfont", "fonts"]   // 需要引入哪些资源
        }),

        //nearby.html   附近页面
        new HtmlWebpackPlugin({
            template: './src/page/nearby.html',
              // 模板页面
            filename: 'nearby.html',
              // 输出的文件名
            chunks: ['nearby', 'commoncss', "dom", "utils", "axios", "iconfont", "fonts"]   // 需要引入哪些资源
        }),

        //collection.html   收藏页面
        new HtmlWebpackPlugin({
            template: './src/page/collection.html',
              // 模板页面
            filename: 'collection.html',
              // 输出的文件名
            chunks: ['collection', 'commoncss', "dom", "utils", "axios", "iconfont", "fonts"]   // 需要引入哪些资源
        }),

        //dynamic.html   个人动态页面
        new HtmlWebpackPlugin({
            template: './src/page/dynamic.html',
              // 模板页面
            filename: 'dynamic.html',
              // 输出的文件名
            chunks: ['dynamic', 'commoncss', "dom", "utils", "axios", "iconfont", "fonts"]   // 需要引入哪些资源
        }),

        //addition.html   添加动态页面
        new HtmlWebpackPlugin({
            template: './src/page/addition.html',
              // 模板页面
            filename: 'addition.html',
              // 输出的文件名
            chunks: ['addition', 'commoncss', "dom", "utils", "axios", "iconfont", "fonts", "weui"]   // 需要引入哪些资源
        }),





        // 提取css，把css中打包的js中提取出来成为独立文件
        new MiniCssExtractPlugin({  // 提取css
            filename: 'css/[name].css'  // 输出到css文件夹里
        }),

        new OptimizeCssAssetsWebpackPlugin()  // 压缩css
    ],

    //模式
    mode: process.env.NODE_ENV,

    //服务器
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
          // 启动服务器目录
        compress: true,
          // 启动gzip
        port: 8848,
           // 端口
        open: true,
          // 自动打开服务
        publicPath: '/',
          // 静态资源查找路径
        openPage: 'ad.html',
          // 打开的页面
    },

    target: 'web',
      // 目标是浏览器
};